<template>
  <div class="maintain">
    <div class="bgc">
      <img src="../assets/img/background.jpg" alt="" class="back" />
      <h1>中小学作业系统</h1>
      <div class="login">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item class="white" label="手机号" prop="name">
            <el-input
              v-model="ruleForm.name"
              type="text"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="white" label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              placeholder="请输入密码"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let checkmobile = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        // 引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    let validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPassword !== "") {
          this.$refs.ruleForm.validateField("checkPassword");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ required: true, validator: checkmobile, trigger: "blur" }],
        password: [
          {
            required: true,
            message: "密码不能为空",
            validator: validatePassword,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let name = this.ruleForm.name;
          let password = this.ruleForm.password;

          this.axios
            .get(
              "http://10.197.42.22:8080/user/login?name=" +
                name +
                "&password=" +
                password +
                ""
            )
            .then((res) => {
              if (res.data === 1) {
                this.$message({
                  message: "恭喜你，登录成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "登录失败",
                  type: "danger",
                });
              }
            });
        }
      });
    },
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
  },
  created() {},
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}
.back {
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  min-height: 100vh;
  z-index: -1;
  position: absolute;
}
.bgc h1 {
  font-size: 50px;
  text-align: center;
  padding-top: 5%;
}
.login {
  z-index: 1;
  position: absolute;
  margin-left: 39%;
  margin-top: 4%;
  background-color: #fff;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding-top: 50px;
  padding-right: 40px;
}
</style>